<template>
  <view class="wallet-container">
    <!-- 钱包余额卡片 -->
    <view class="wallet-header">
      <view class="balance-card">
        <view class="balance-info">
          <text class="balance-label">钱包余额</text>
          <view class="balance-amount">
            <text class="currency">¥</text>
            <text class="amount">{{walletBalance}}</text>
          </view>
          <text class="last-update">最后更新：{{lastUpdateTime}}</text>
        </view>
        
        <view class="balance-actions">
          <view class="action-item" @click="recharge">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
            <text>充值</text>
          </view>
          <view class="action-item" @click="withdraw">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
            <text>提现</text>
          </view>
          <view class="action-item" @click="transfer">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
            <text>转账</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 功能导航 -->
    <view class="feature-nav">
      <view class="nav-item" @click="goToRedPackets">
        <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
        <text>红包</text>
        <view class="nav-badge" v-if="redPacketCount > 0">{{redPacketCount}}</view>
      </view>
      
      <view class="nav-item" @click="goToCoupons">
        <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
        <text>优惠券</text>
        <view class="nav-badge" v-if="couponCount > 0">{{couponCount}}</view>
      </view>
      
      <view class="nav-item" @click="goToCards">
        <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
        <text>银行卡</text>
      </view>
      
      <view class="nav-item" @click="goToPayPassword">
        <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
        <text>支付密码</text>
      </view>
    </view>
    
    <!-- 交易记录 -->
    <view class="transaction-section">
      <view class="section-header">
        <text class="section-title">交易记录</text>
        <text class="view-all" @click="viewAllTransactions">查看全部</text>
      </view>
      
      <view class="transaction-filters">
        <view 
          class="filter-item" 
          :class="{active: currentFilter === item.key}"
          v-for="item in filterTabs" 
          :key="item.key"
          @click="switchFilter(item.key)"
        >
          {{item.label}}
        </view>
      </view>
      
      <view class="transaction-list">
        <view 
          class="transaction-item" 
          v-for="item in filteredTransactions" 
          :key="item.id"
        >
          <view class="transaction-icon">
            <image :src="getTransactionIcon(item.type)" />
          </view>
          
          <view class="transaction-info">
            <text class="transaction-title">{{item.title}}</text>
            <text class="transaction-time">{{item.createTime}}</text>
          </view>
          
          <view class="transaction-amount">
            <text 
              class="amount" 
              :class="{positive: item.amount > 0, negative: item.amount < 0}"
            >
              {{item.amount > 0 ? '+' : ''}}¥{{Math.abs(item.amount).toFixed(2)}}
            </text>
            <text class="status" :class="item.status">{{getStatusText(item.status)}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 安全设置 -->
    <view class="security-section">
      <view class="section-title">安全设置</view>
      <view class="security-list">
        <view class="security-item" @click="enableFingerprint">
          <view class="item-info">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
            <text>指纹支付</text>
          </view>
          <switch :checked="securitySettings.fingerprint" @change="toggleFingerprint" />
        </view>
        
        <view class="security-item" @click="enableFaceId">
          <view class="item-info">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
            <text>面容支付</text>
          </view>
          <switch :checked="securitySettings.faceId" @change="toggleFaceId" />
        </view>
        
        <view class="security-item" @click="setPaymentLimit">
          <view class="item-info">
            <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
            <text>免密支付限额</text>
          </view>
          <view class="item-value">
            <text>¥{{securitySettings.paymentLimit}}</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      walletBalance: '1,258.50',
      lastUpdateTime: '2024-01-15 15:30',
      redPacketCount: 3,
      couponCount: 12,
      currentFilter: 'all',
      filterTabs: [
        { key: 'all', label: '全部' },
        { key: 'income', label: '收入' },
        { key: 'expense', label: '支出' },
        { key: 'pending', label: '待处理' }
      ],
      transactions: [
        {
          id: 1,
          type: 'order_payment',
          title: '订单支付',
          amount: -99.00,
          status: 'success',
          createTime: '2024-01-15 14:30'
        },
        {
          id: 2,
          type: 'recharge',
          title: '钱包充值',
          amount: 200.00,
          status: 'success',
          createTime: '2024-01-15 10:15'
        },
        {
          id: 3,
          type: 'refund',
          title: '订单退款',
          amount: 58.00,
          status: 'pending',
          createTime: '2024-01-14 16:45'
        },
        {
          id: 4,
          type: 'red_packet',
          title: '红包收入',
          amount: 8.88,
          status: 'success',
          createTime: '2024-01-14 12:20'
        },
        {
          id: 5,
          type: 'transfer',
          title: '转账给朋友',
          amount: -50.00,
          status: 'success',
          createTime: '2024-01-13 19:30'
        }
      ],
      securitySettings: {
        fingerprint: true,
        faceId: false,
        paymentLimit: 200
      }
    }
  },
  
  computed: {
    filteredTransactions() {
      let filtered = this.transactions
      
      switch (this.currentFilter) {
        case 'income':
          filtered = this.transactions.filter(item => item.amount > 0)
          break
        case 'expense':
          filtered = this.transactions.filter(item => item.amount < 0)
          break
        case 'pending':
          filtered = this.transactions.filter(item => item.status === 'pending')
          break
        default:
          filtered = this.transactions
      }
      
      return filtered
    }
  },
  
  methods: {
    recharge() {
      uni.showActionSheet({
        itemList: ['微信支付', '支付宝', '银行卡'],
        success: (res) => {
          const methods = ['微信支付', '支付宝', '银行卡']
          uni.showToast({
            title: `选择了${methods[res.tapIndex]}`,
            icon: 'none'
          })
        }
      })
    },
    
    withdraw() {
      uni.showModal({
        title: '提现',
        content: '提现功能正在开发中，敬请期待',
        showCancel: false
      })
    },
    
    transfer() {
      uni.showToast({
        title: '转账功能开发中',
        icon: 'none'
      })
    },
    
    goToRedPackets() {
      uni.showToast({
        title: '红包页面开发中',
        icon: 'none'
      })
    },
    
    goToCoupons() {
      uni.navigateTo({
        url: '/pages/coupon/list'
      })
    },
    
    goToCards() {
      uni.showToast({
        title: '银行卡管理开发中',
        icon: 'none'
      })
    },
    
    goToPayPassword() {
      uni.showToast({
        title: '支付密码设置开发中',
        icon: 'none'
      })
    },
    
    switchFilter(key) {
      this.currentFilter = key
    },
    
    viewAllTransactions() {
      uni.showToast({
        title: '交易记录详情开发中',
        icon: 'none'
      })
    },
    
    getTransactionIcon(type) {
      const icons = {
        order_payment: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
        recharge: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
        refund: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
        red_packet: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
        transfer: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
      }
      return icons[type] || 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
    },
    
    getStatusText(status) {
      const statusMap = {
        success: '成功',
        pending: '处理中',
        failed: '失败'
      }
      return statusMap[status] || status
    },
    
    toggleFingerprint(e) {
      this.securitySettings.fingerprint = e.detail.value
      
      if (e.detail.value) {
        uni.showModal({
          title: '开启指纹支付',
          content: '请验证指纹以开启指纹支付功能',
          success: (res) => {
            if (res.confirm) {
              uni.showToast({
                title: '指纹支付已开启',
                icon: 'success'
              })
            } else {
              this.securitySettings.fingerprint = false
            }
          }
        })
      }
    },
    
    toggleFaceId(e) {
      this.securitySettings.faceId = e.detail.value
      
      if (e.detail.value) {
        uni.showModal({
          title: '开启面容支付',
          content: '请验证面容以开启面容支付功能',
          success: (res) => {
            if (res.confirm) {
              uni.showToast({
                title: '面容支付已开启',
                icon: 'success'
              })
            } else {
              this.securitySettings.faceId = false
            }
          }
        })
      }
    },
    
    setPaymentLimit() {
      uni.showActionSheet({
        itemList: ['¥100', '¥200', '¥500', '¥1000', '自定义'],
        success: (res) => {
          const limits = [100, 200, 500, 1000]
          if (res.tapIndex < 4) {
            this.securitySettings.paymentLimit = limits[res.tapIndex]
            uni.showToast({
              title: `限额已设置为¥${limits[res.tapIndex]}`,
              icon: 'success'
            })
          } else {
            uni.showToast({
              title: '自定义限额功能开发中',
              icon: 'none'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wallet-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.wallet-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
  
  .balance-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 40rpx;
    
    .balance-info {
      text-align: center;
      margin-bottom: 40rpx;
      
      .balance-label {
        font-size: 28rpx;
        color: #666666;
        display: block;
        margin-bottom: 10rpx;
      }
      
      .balance-amount {
        margin-bottom: 10rpx;
        
        .currency {
          font-size: 36rpx;
          color: #333333;
          margin-right: 5rpx;
        }
        
        .amount {
          font-size: 72rpx;
          font-weight: bold;
          color: #333333;
        }
      }
      
      .last-update {
        font-size: 24rpx;
        color: #999999;
      }
    }
    
    .balance-actions {
      display: flex;
      justify-content: space-around;
      
      .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        image {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
        }
        
        text {
          font-size: 26rpx;
          color: #666666;
        }
      }
    }
  }
}

.feature-nav {
  background-color: #ffffff;
  display: flex;
  padding: 40rpx;
  margin-bottom: 20rpx;
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    
    image {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }
    
    text {
      font-size: 26rpx;
      color: #666666;
    }
    
    .nav-badge {
      position: absolute;
      top: -5rpx;
      right: 15rpx;
      background-color: #ff4757;
      color: #ffffff;
      font-size: 20rpx;
      padding: 2rpx 8rpx;
      border-radius: 10rpx;
      min-width: 20rpx;
      text-align: center;
    }
  }
}

.transaction-section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
    
    .view-all {
      font-size: 26rpx;
      color: #667eea;
    }
  }
  
  .transaction-filters {
    display: flex;
    padding: 0 40rpx 20rpx;
    
    .filter-item {
      padding: 12rpx 30rpx;
      margin-right: 20rpx;
      border-radius: 20rpx;
      font-size: 26rpx;
      color: #666666;
      background-color: #f8f8f8;
      
      &.active {
        background-color: #667eea;
        color: #ffffff;
      }
    }
  }
  
  .transaction-list {
    .transaction-item {
      display: flex;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .transaction-icon {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        
        image {
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
        }
      }
      
      .transaction-info {
        flex: 1;
        
        .transaction-title {
          font-size: 30rpx;
          color: #333333;
          font-weight: bold;
          display: block;
          margin-bottom: 5rpx;
        }
        
        .transaction-time {
          font-size: 24rpx;
          color: #999999;
        }
      }
      
      .transaction-amount {
        text-align: right;
        
        .amount {
          font-size: 32rpx;
          font-weight: bold;
          display: block;
          margin-bottom: 5rpx;
          
          &.positive {
            color: #4caf50;
          }
          
          &.negative {
            color: #333333;
          }
        }
        
        .status {
          font-size: 24rpx;
          
          &.success {
            color: #4caf50;
          }
          
          &.pending {
            color: #ff9800;
          }
          
          &.failed {
            color: #f44336;
          }
        }
      }
    }
  }
}

.security-section {
  background-color: #ffffff;
  
  .section-title {
    padding: 30rpx 40rpx 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
  
  .security-list {
    .security-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-info {
        display: flex;
        align-items: center;
        
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
        
        text {
          font-size: 30rpx;
          color: #333333;
        }
      }
      
      .item-value {
        display: flex;
        align-items: center;
        
        text:first-child {
          font-size: 28rpx;
          color: #666666;
          margin-right: 10rpx;
        }
        
        .arrow {
          font-size: 28rpx;
          color: #cccccc;
        }
      }
    }
  }
}
</style> 